$S:5px;
$M:10px;
$L:15px;
$XL:20px;
.pd-s{
  padding: $S;
}
.pd-m{
  padding: $M;
}
.pd-l{
  padding: $L;
}
.pd-xl{
  padding: $XL;
}
//padding-top
.pd-t-s{
  padding-top: $S;
}
.pd-t-m{
  padding-top: $M;
}
.pd-t-l{
  padding-top: $L;
}
.pd-t-xl{
  padding-top: $XL;
}
//padding-right
.pd-r-s{
  padding-right: $S;
}
.pd-r-m{
  padding-right: $M;
}
.pd-r-l{
  padding-right: $L;
}
.pd-r-xl{
  padding-right: $XL;
}
//padding-bottom
.pd-b-s{
  padding-bottom: $S;
}
.pd-b-m{
  padding-bottom: $M;
}
.pd-b-l{
  padding-bottom: $L;
}
.pd-b-xl{
  padding-bottom: $XL;
}
//padding-left
.pd-l-s{
  padding-left: $S;
}
.pd-l-m{
  padding-left: $M;
}
.pd-l-l{
  padding-left: $L;
}
.pd-l-xl{
  padding-left: $XL;
}

.mr-s{
  margin: $S;
}
.mr-m{
  margin: $M;
}
.mr-l{
  margin: $L;
}
.mr-xl{
  margin: $XL;
}
//margin-top
.mr-t-s{
  margin-top: $S;
}
.mr-t-m{
  margin-top: $M;
}
.mr-t-l{
  margin-top: $L;
}
.mr-t-xl{
  margin-top: $XL;
}
//margin-right
.mr-r-s{
  margin-right: $S;
}
.mr-r-m{
  margin-right: $M;
}
.mr-r-l{
  margin-right: $L;
}
.mr-r-xl{
  margin-right: $XL;
}
//margin-bottom
.mr-b-s{
  margin-bottom: $S;
}
.mr-b-m{
  margin-bottom: $M;
}
.mr-b-l{
  margin-bottom: $L;
}
.mr-b-xl{
  margin-bottom: $XL;
}
//margin-left
.mr-l-s{
  margin-left: $S;
}
.mr-l-m{
  margin-left: $M;
}
.mr-l-l{
  margin-left: $L;
}
.mr-l-xl{
  margin-left: $XL;
}